<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="utf-8">
<title>简洛订餐系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="/WEB-INF/views/inc/inc.jsp"></jsp:include>
</head>
<body style="zoom: 1;">
	<jsp:include page="/WEB-INF/views/inc/Header.jsp"></jsp:include>
	<div class="container" >
		<div class="border"
			style="padding-top: 5px; padding-bottom: 5px; border-bottom: solid 1px #ccc;">
			<div style="width: 300px; margin-left: auto; margin-right: auto;"  >
				<div class="button-toolbar" style="margin: 10px 0px; float: left;">
				   <div class="button-group ">
					<select id="yearSel"
						class="button "
						data-live-search="true">
						<option value="2014" <c:if test="${year =='2014' }">selected="selected"</c:if>>2014年</option>
						<option value="2015" <c:if test="${year =='2015' }">selected="selected"</c:if>>2015年</option>
						<option value="2016" <c:if test="${year =='2016' }">selected="selected"</c:if>>2016年</option>
						<option value="2017" <c:if test="${year =='2017' }">selected="selected"</c:if>>2017年</option>
					</select>
					</div>
					<div class="button-group ">
						<a class="button " id="leftMonthBut"><span
							class="icon-chevron-left"></span></a>
						<select id="monthSel"
							class="button " 
							data-live-search="true" >
							<option value="1" <c:if test="${month =='1' }">selected="selected"</c:if>>1月</option>
							<option value="2" <c:if test="${month =='2' }">selected="selected"</c:if>>2月</option>
							<option value="3" <c:if test="${month =='3' }">selected="selected"</c:if>>3月</option>
							<option value="4" <c:if test="${month =='4' }">selected="selected"</c:if>>4月</option>
							<option value="5" <c:if test="${month =='5' }">selected="selected"</c:if>>5月</option>
							<option value="6" <c:if test="${month =='6' }">selected="selected"</c:if>>6月</option>
							<option value="7" <c:if test="${month =='7' }">selected="selected"</c:if>>7月</option>
							<option value="8" <c:if test="${month =='8' }">selected="selected"</c:if>>8月</option>
							<option value="9" <c:if test="${month =='9' }">selected="selected"</c:if>>9月</option>
							<option value="10" <c:if test="${month =='10' }">selected="selected"</c:if>>10月</option>
							<option value="11" <c:if test="${month =='11' }">selected="selected"</c:if>>11月</option>
							<option value="12" <c:if test="${month =='12' }">selected="selected"</c:if>>12月</option>
						</select>
						<a class="button" id="rightMonthBut"><span
							class="icon-chevron-right"></span></a>
					</div>
				</div>
				<!-- /toolbar -->
			</div>
			<div class="col-xs-12 " style="margin: 0px; padding-top: 15px;">
				<table id="calendarTable" class="table table-bordered calendarTable">
					<thead>
						<tr>
							<th>星期日</th>
							<th>星期一</th>
							<th>星期二</th>
							<th>星期三</th>
							<th>星期四</th>
							<th>星期五</th>
							<th>星期六</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="row" items="${obj }">
							<tr>
								<c:forEach var="dayCell" items="${row }">
									<td day="${dayCell['day'] }" ordercount="${dayCell['usercount']}"><div>
											<ul>
												<li class=" left">${dayCell['day'] }</li>
												<li class="right"><c:if
														test="${dayCell['day'] != '' && dayCell['day'] != null}">
														<ul>
															<li>人数：${(dayCell['usercount'] == '' ||dayCell['usercount'] == null) ? '0' : dayCell['usercount']}人</li>
															<li>份数：${(dayCell['ordercount']  == '' ||dayCell['usercount'] == null) ? '0' : dayCell['ordercount']}份</li>
														</ul>
													</c:if></li>
											</ul>
										</div></td>
								</c:forEach>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			$("#calendarTable tr td").click(function() {
				var day = $(this).attr("day");
				var ordercount = $(this).attr("ordercount");
				if (day != undefined && day != '' && ordercount != undefined && ordercount != '') {
					var year = $("#yearSel").val();
					var month = $("#monthSel").val();
					window.location.href = "OrdersList.nut?year=" + year + "&month=" + month + "&day=" + day;
				}
				// 	    alert("ddd");
			});

			$("#yearSel").change(function() {
				doChangeDate(this.value, $("#monthSel").val())
			});
			$("#monthSel").change(function() {
				doChangeDate($("#yearSel").val(), this.value)
			});

			$("#rightMonthBut").click(function() {
				var year = parseInt($("#yearSel").val());
				var month = parseInt($("#monthSel").val());
				if (12 == month) {
					year++;
					month = 1;
				} else {
					month++;
				}
				doChangeDate(year, month)
			});

			$("#leftMonthBut").click(function() {
				var year = parseInt($("#yearSel").val());
				var month = parseInt($("#monthSel").val());
				if (1 == month) {
					year--;
					month = 12;
				} else {
					month--;
				}
				doChangeDate(year, month)
			});
			function doChangeDate(year, month) {
// 				alert(year + "-" + month)
				window.location.href = "OrdersCalendarManager.nut?year=" + year + "&month=" + month;
			}
		});
	</script>
	<jsp:include page="/WEB-INF/views/inc/Inc01.jsp"></jsp:include>
</body>
</html>